<template>
  <div>
   <Table  border stripe size="small" ref="table" :columns="columns" :data="tableData" ></Table>
  </div>
  
</template>

<script>
import { getAreaCarFreights} from '@/api/car/carApi'
import EditColumn from './components/EditColumn.vue'
export default {
  components: {
    EditColumn
  },
  data () {
    return {
      tableData:[],
      isLoad:false,
      selectRows:[],
      columns:[ {title: '地区', key: 'argaName',align: 'center',width:150,fixed:'left',className:'first_column',render:this.firstColumnRender}],
    }
  },
  methods: {
      
    initData(){
        getAreaCarFreights((res=>{
           
            this.initColumns(res.data[0].carFreightInfos);
            this.tableData=res.data;
            this.isLoad=true;
        }));
        
     },

    initColumns(item){
      
       let areasFeigns= {title: '车型收费标准',align:'center',children: []};
       item.forEach((v,i) => {
             let areas={title: v.carTypeName,align:'center',children: [
                  {title: 'Km',key: 'defalutKm_'+i,minWidth:80,isSelectColumn:false,className:'edit_column',align: 'center',render:this.columnRender,renderHeader:this.columnRenderHeader},
                  {title: '超出',key: 'exceedPrice_'+i,minWidth:80,isSelectColumn:false,className:'edit_column',align:'center',render:this.columnRender,renderHeader:this.columnRenderHeader},
                  {title: '同城',key: 'wideCityPrice_'+i,minWidth:80,isSelectColumn:false,className:'edit_column',align: 'center',render:this.columnRender,renderHeader:this.columnRenderHeader},
                  {title: '城际',key: 'interCityPrice_'+i,minWidth:80,isSelectColumn:false,className:'edit_column',align: 'center',render:this.columnRender,renderHeader:this.columnRenderHeader}
             ]};
             areasFeigns.children.push(areas);
             
       }); 
     
      this.columns.push(areasFeigns);
      
    },
    columnRenderHeader(h,params){
       
        return h('span',{
                 class:{iconfont:true,'headel_cloumn':true,select:params.column.isSelectColumn},
                  on:{
                       click:()=>{
                            this.selectColumn(params);
                       }
                   }
                },params.column.title)
    },
    columnRender(h,params){
        var keys=params.column.key.split("_");
        return h(EditColumn, {
          props: {
              params: params,
              value: params.row.carFreightInfos[keys[1]][keys[0]],
            // edittingCellId: params.edittingCellId,
            // editable:true
          },
          on: {
            'on-column-click': (params) => {
                this.onDataColumnClick(params);
             }
           }
        });
    },
    firstColumnRender(h,params){
        return h('span', {
          props: {
            
          },
          on: {
            'click': () => {
                this.onFirstColumnClick(params);
             }
           }
        },params.row[params.column.key]);
    },
    clickHandler(params){
       
    },
    checkIsSelectColumn(index){
        let isOK=false;
        try{
          this.selectColumns.forEach(v=>{
            if(v===index){
                isOK=true;
                throw new Error("BraekForEach");
            }
        })  
        }catch(e){
           
        }
        console.error("isoK"+isOK)
        return isOK;
    },
    getCurentColumnIndex(key){
        switch(key){
            case 'defalutKm':
             return 0;
            case 'exceedPrice':
             return 1;
            case  'wideCityPrice':
             return 2;
            default:
             return 3;    
        }
    },
    onFirstColumnClick(params){
        let tr=document.getElementsByClassName("ivu-table-row");
        var children=tr[params.index].children;
        debugger;
        let first_columns=document.getElementsByClassName("first_column");
        let rowIndex=((first_columns.length/2)+1)+params.index;
        let firstTh=first_columns[rowIndex];
        let isAdd=firstTh.children[0].classList.toggle("select");
        for(var i=1; i<children.length;i++){
            if(!isAdd){
                children[i].children[0].classList.remove("select")
            }else{
                children[i].children[0].classList.add("select")
            }
        }
    },
    onDataColumnClick(params){
         let row=params.index;
         let keys=params.column.key.split("_");
         let column=this.getCurentColumnIndex(keys[0])+(keys[1]*4);
         let tr=document.getElementsByClassName("ivu-table-row");
         tr[row].children[column+1].children[0].classList.toggle("select");
    },
    /**
     * @TODO 这个方法可以优化的!尽可能结合vue 的双向绑定来实现!
     * 点击列表头则全选该列
     */
    selectColumn(params){
         let spans=document.getElementsByClassName("headel_cloumn");
         let keys=params.column.key.split("_");
         let index=this.getCurentColumnIndex(keys[0])+(keys[1]*4);
         let span=spans[index];
         let isAdd=span.classList.toggle("select");
         let tr=document.getElementsByClassName("ivu-table-row");
         for(var i=0;i<tr.length/2;i++){
             let sp=tr[i].children[index+1].children[0];
             if(!isAdd){
                 sp.classList.remove("select")
             }else{
                 sp.classList.add("select")
             }
            
         }

    },
    add(){
          this.saveStatus=true;
          editCarType(this.formData)
          .then(res=>{
             this.saveStatus=false
             this.isShopPanel=false;
             this.$refs.tables.loadData();
          })
          .catch(err=>{
             this.saveStatus=false;
             this.$Message.error(err);
          });
    },
    onEdit(params){
        
    },
    onAdd(){
        this.isShopPanel=true;
    }
  },
  created () {
     this.initData();
  }
}
</script>
<style>
      .edit_column{
          padding: 0px !important;
      }
      .edit_column .ivu-table-cell{
          width: 100%;
          height: 100%;
          padding: 0px !important;
      }
      .select{
           background: rebeccapurple;
           color: white !important;
      }
     .first_column{
          padding: 0px !important;
     }
     .first_column .ivu-table-cell{
          width: 100%;
          height: 100%;
          color:#515a6e;
          padding: 0px !important;
     }
     .first_column .ivu-table-cell span{
            font-size: 12px;
            width: 100%;
            text-align: center;
            height: 100%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            line-height: 40px;
     }
     .headel_cloumn{
         color:#515a6e;
         font-size: 12px;
         width: 100%;
         text-align: center;
         height: 100%;
         cursor: pointer;
         display: flex;
         justify-content: center;
         line-height: 34px;
     }
     .edit_column  .edit_column_input_warp {
         padding-left: 5px;
         padding-right: 5px;
     } 
</style>

<style lang="less" scoped>
   
  
</style>
